{extend name="public/base" /}
{block name="body"}
<body class="hold-transition skin-purple sidebar-mini">

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="top:3%;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">订单详情</h4>
            </div>
            <form id="detailForm" method="post">
                <div class="modal-body" style="height: 100%;text-align: center;">
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">销售序号</label>
                        <div class="col-sm-9">
                            <input id="detail_sID" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">生产序号</label>
                        <div class="col-sm-9">
                            <input id="detail_pID" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">生产名称</label>
                        <div class="col-sm-9">
                            <input id="detail_gName" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style=" height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">用户编号</label>
                        <div class="col-sm-9">
                            <input id="detail_uID" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style=" height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">销售数量</label>
                        <div class="col-sm-9">
                            <input id="detail_uNum" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">总价</label>
                        <div class="col-sm-9">
                            <input id="detail_uPrice" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">销售地址</label>
                        <div class="col-sm-9">
                            <input id="detail_uAddr" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">快递单号</label>
                        <div class="col-sm-9">
                            <input id="detail_uTrack" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">发出日期</label>
                        <div class="col-sm-9">
                            <input id="detail_uSDate" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">接受日期</label>
                        <div class="col-sm-9">
                            <input id="detail_uRDate" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">客户满意度</label>
                        <div class="col-sm-9">
                            <input id="detail_uCS" class="form-control" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group" style="text-align: center; height: 36px;">
                        <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">备注说明</label>
                        <div class="col-sm-9">
                            <textarea id="detail_ps" class="form-control" readonly="readonly"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /详情模态框 -->

<!-- 显示图片模态框 -->
<div class="modal fade" id="bigImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" style="top:20%;left: 5%;" role="document">
        <div class="modal-content" style="width: 410px;padding: 0 10px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" style="height: 100%;width: 100%;text-align: center;">
                <div style="width: 360px;height: 350px;">
                    <img id="bigImg" src="" alt="暂无" style="width: 100%;height: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- /显示图片模态框 -->

<div class="wrapper">

    <!-- 内容区域 -->
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                销售管理
                <small>Sell Tables</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="home.html"><i class="fa fa-dashboard"></i>主页</a></li>
                <li><a href="#">系统管理</a></li>
                <li class="active">销售管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- .box-body -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">销售清单</h3>
                </div>

                <div class="box-body">
                    <!-- 数据表格 -->
                    <div class="table-box">
                        <!--数据列表-->
                        <table id="dataList" class="table table-hover table-striped table-bordered"
                               data-search-highlight="true"
                               data-show-pagination-switch="true"
                               data-show-search-button="true"
                               data-show-search-clear-button="true"
                               data-sort-name="sID"
                               data-total-field="count"
                               data-toolbar="#toolbar"
                        >
                        </table>
                        <!--数据列表/-->
                    </div>
                    <!-- 数据表格 /-->

                </div>
                <!-- /.box-body -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- page script -->
    <!-- 内容区域 /-->


</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}

<script>

    $(document).ready(function() {
        // 选择框
        $(".select2").select2();

        // WYSIHTML5编辑器
        $(".textarea").wysihtml5({
            locale: 'zh-CN'
        });
    });


    // 设置激活菜单
    function setSidebarActive(tagUri) {
        var liObj = $("#" + tagUri);
        if (liObj.length > 0) {
            liObj.parent().parent().addClass("active");
            liObj.addClass("active");
        }
    }


    // 激活导航位置
    setSidebarActive("admin-sell");

    var $table = $('#dataList');

    /* 表格开始 */
    $(function() {
        // 列表按钮
        $("#dataList td input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
        //表头
        var tableColumns = [
            {field:'sID', title:'销售序号', sortable: true, width:10},
            {field:'pID', title:'生产序号', sortable: true, width:10},
            {field:'gName', title:'产品名称', sortable: true, width:10,cellStyle: formatTableUnit, formatter: paramsMatter,},
            {
                title: '产品图片',
                field: 'gImg',
                cellStyle: function (value, row, index) {
                    return {
                        css: {
                            "text-align": "center",
                            "height": "100%",
                            "width": "120px"
                        }
                    }
                },
                formatter : function (value, row, index) {
                    // __PUBLIC__ 会报错
                    //  __STATIC__/../ => public 文件夹
                    var img_src = "__STATIC__/../uploads/goodsImg/"+value;
                    return "<a href='#' onclick='bigImgClick("+index+")'><img style='width: 110px;height: 80px;' src='"+img_src+"' alt='暂无图片'></a>"
                }
            },
            {field:'uID', title:'用户编号', sortable: true},
            {field:'uNum', title:'销售数量', sortable: true},
            {field:'uPrice', title:'总价', sortable: true},
            {field:'uAddr', title:'销售地址',sortable: true,cellStyle: formatTableUnit, formatter: paramsMatter},
            {field:'uTrack', title:'快递单号', sortable: true,cellStyle: formatTableUnit, formatter: paramsMatter},
            {field:'uSDate', title:'发出日期', sortable: true},
            {field:'uRDate', title:'接收日期',sortable: true},
            {field:'uCS', title:'客户满意度', sortable: true},
            {field:'ps', title:'备注说明', sortable: true,cellStyle: formatTableUnit, formatter: paramsMatter},
            {
                title: '操作',
                formatter: function (value, row, index) {
                    return "<button type='button' onclick='getDetail(" + index + ")' class='btn btn-primary btn-xs' style='margin-left: 10%'><i class='fa fa-book'></i> 详情</button>"
                }
            }
        ];


        /** 表格赋值 **/
        $table.bootstrapTable({

            method: 'post',
            url: "../company/getSellDataList", // 请求路径
            striped: true, // 是否显示行间隔色
            pageNumber: 1, // 初始化加载第一页
            pagination: true, // 是否分页
            search: true, //搜索
            showRefresh: true, //搜索处刷新
            clickToSelect: true, //是否启用点击一行任意位置选中该行
            sortOrder: "asc",     //排序方式
            sidePagination: 'client', // server:服务器端分页|client：前端分页
            pageSize: 5, // 单页记录数
            pageList: [5, 10, 15],

            queryParams: function(params) { // 上传服务器的参数
                var temp = {
                    name: $("#sname").val(),
                    viewReason: $("#viewReason").val(),
                };
                return temp;

            },

            columns: tableColumns,

        })

        //表格超出宽度鼠标悬停显示td内容
        function paramsMatter(value, row, index) {

            var span = document.createElement("span");
            span.setAttribute("title", value);
            span.innerHTML = value;

            return span.outerHTML;
        }
        //td宽度以及内容超过宽度隐藏
        function formatTableUnit(value, row, index) {
            return {
                css: {
                    "white-space": "nowrap",
                    "text-overflow": "ellipsis",
                    "overflow": "hidden",
                    "max-width": "60px"
                }
            }
        }

    });

    /* 表格完 */

    /* 查看指定行详情 */
    function getDetail(index){
        //通过当前行在表中的index 获取当前行信息
        var row = $table.bootstrapTable('getData')[index]; //getData方法获取表中信息
        //console.log(row)
        //填充行中对应数据到模态框中
        $("#detail_sID").val(row.sID);
        $("#detail_pID").val(row.pID);
        $("#detail_gName").val(row.gName);
        $("#detail_uID").val(row.uID);
        $("#detail_uNum").val(row.uNum);
        $("#detail_uPrice").val(row.uPrice);
        $("#detail_uAddr").val(row.uAddr);
        $("#detail_uTrack").val(row.uTrack);
        $("#detail_uSDate").val(row.uSDate);
        $("#detail_uRDate").val(row.uRDate);
        $("#detail_uCS").val(row.uCS);
        $("#detail_ps").val(row.ps);
        //唤起modal
        $("#detailModal").modal();
    }

    /* 大图 */
    function bigImgClick(index){
        var row = $table.bootstrapTable('getData')[index];
        $('#bigImg').attr('src',"__STATIC__/../uploads/goodsImg/"+row.gImg);
        $('#bigImgModal').modal();
    }



</script>
</body>

</html>
<!---->

{/block}